<html>
    <head>
        <style>
            body {
                margin: 0;
                font-family: sans-serif;
                display: flex;
                gap: 10px;
                flex-direction: column;
            }

            .box {
                width: 100px;
                height: 100px;
                background-color: #0077ff;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="box" id="mini">mini</div>
        <div class="box" id="js">js</div>
        <div class="box" id="waapi">waapi</div>
        <script type="module" src="/src/inc.js"></script>
        <script type="module">
            const { animateMini, animate, delay } = window.Motion

            const options = {
                duration: 0.2,
            }

            const mini = animateMini(
                "#mini",
                {
                    transform: "translateX(100px)",
                },
                options
            )
            const js = animate("#js", { x: 100 }, options)
            const waapi = animate(
                "#waapi",
                { transform: "translateX(100px)" },
                options
            )

            delay(() => {
                mini.play()
                js.play()
                waapi.play()

                delay(() => {
                    const miniElement = document.getElementById("mini")
                    const miniX = miniElement.getBoundingClientRect().x
                    const jsElement = document.getElementById("js")
                    const jsX = jsElement.getBoundingClientRect().x
                    const waapiElement = document.getElementById("waapi")
                    const waapiX = waapiElement.getBoundingClientRect().x

                    if (miniX === 100 || miniX === 0) {
                        miniElement.innerHTML = "error"
                    }

                    if (jsX === 100 || jsX === 0) {
                        jsElement.innerHTML = "error"
                    }

                    if (waapiX === 100 || waapiX === 0) {
                        waapiElement.innerHTML = "error"
                    }
                }, 0.05)
            }, 0.3)
        </script>
    </body>
</html>
